<template>
  <div>
    <van-list
      v-model="Laoding"
      :finished="finished"
      finished-text="我是有底线的..."
      @load="onLoad"
    >
      <div
        class="singer"
        v-for="(item, index) in playlists"
        :key="index"
        @click="toDetail(item.id)"
      >
        <div class="img">
          <img :src="item.coverImgUrl + '?param=120y120'" alt="" />
        </div>
        <div class="text">
          <p class="van-ellipsis">{{ item.name }}</p>
          <p class="van-ellipsis">
            创建者：{{ item.creator.nickname }} / 播放
            <span v-if="item.playCount > 10000"
              >{{ parseInt(item.playCount / 10000) }} 万</span
            >
            <span v-else>{{ item.playCount }}次</span>
          </p>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { GetsearchAPI } from "@/api/api.js";
export default {
  name: "MusicSearchSong",
  props: ["val"],

  data() {
    return {
      playlists: [],
      Laoding: true,
      finished: false,
      offset: 0,
      toal: 0,
    };
  },

  mounted() {
    this.onLoad();
  },

  methods: {
    toDetail(id) {
      this.$router.push({
        path: "/MusicDetail",
        query: { id },
      });
    },
    onLoad() {
      let offset = this.offset;
      GetsearchAPI({ keywords: this.val, offset, limit: 20, type: 1000 }).then(
        (res) => {
          if (res.status == 200) {
            this.playlists = [...this.playlists, ...res.data.result.playlists]; //填充列表
            this.offset += 20; //改变起始位置
            this.toal = res.data.result.playlistCount; //总数
            this.Laoding = false; // 数据加载完成
            if (this.playlists.length > this.toal) {
              this.finished = true; //大于停止
            }
          }
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
// 专辑
.singer {
  display: flex;
  height: 3.125rem;
  margin: 0.625rem;
  // background-color: red;
  .img {
    width: 3.125rem;
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: center;
    border-radius: 0.625rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.3125rem;
    }
  }
  .text {
    flex: 1;
    max-width: 15.625rem;
    padding-left: 0.9375rem;
    text-align: left;
    p {
      line-height: 1.5625rem;
    }
    p:nth-child(1) {
      font-size: 1rem;
      color: #36b98e;
    }
    p:nth-child(2) {
      font-size: 0.75rem;
      color: #929292;
    }
  }
}
</style>